<template>
  <router-link to="/" class="site-logo-container">
    <template v-if="logoUrl">
      <img :src="logoUrl" :alt="title" class="logo-image" />
      <span class="title-with-icon">{{ title }}</span>
    </template>
    <template v-else>
      <span class="title-without-icon">{{ title }}</span>
    </template>
  </router-link>
</template>

<script setup>
defineProps({
  logoUrl: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    required: true,
    default: '递归茶馆',
  },
})
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'FUSION';
  src: url('../assets/fonts/fusion-pixel-12px-proportional-zh_hans.ttf') format('truetype');
  font-display: swap;
}
.site-logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  height: 100%;
  white-space: nowrap;
  gap: 10px;

  .logo-image {
    height: 28px;
    display: block;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .title-with-icon,
  .title-without-icon {
    font-size: 19px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
  }

  .title-without-icon {
    font-family: 'FUSION', 'HarmonyOS Sans', 'PingFang SC', 'Helvetica Neue', Arial,
      'Microsoft YaHei', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-primary);
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    transition:
      color 0.3s,
      background 0.3s;
    line-height: 1.1;
    padding-right: 2px;
  }

  &:hover {
    .logo-image {
      transform: scale(1.05);
    }
    .title-with-icon,
    .title-without-icon {
      color: var(--color-primary);
      filter: brightness(1.1);
    }
  }
}

@media (max-width: 768px) {
  .site-logo-container {
    gap: 8px;
    .logo-image {
      height: 24px;
    }
    .title-with-icon {
      font-size: 17px;
    }
    .title-without-icon {
      font-size: 19px;
      letter-spacing: 1px;
      padding-right: 0;
    }
  }
}
</style>
